<template>
	<view class="pb-2 content">
		<view class="m-2">
			<view  v-for="(item,index) in chapterList" :key="item.id" class="d-flex flex-row p-2 chapter_con mt-3" 
					@click="gotoShuati(item.id)">
				<view class="d-flex flex-column" style="width: 620upx;">
					<view class="d-flex flex-row flex-nowrap">
						<view class="chapter_icon">
							<image src="../../static/icon/chapter_item.png" style="width: 30upx;height: 30upx;"></image>
						</view>
						<view class="chapter_title">
							<text>{{ item.chapterTitle }}</text>
						</view>
					</view>
					<view class="d-flex flex-row">
						<view class="w-50">
							<text>共</text><text class="mx-1 total_num">{{ item.questionNum }}</text><text>题</text>
						</view>
					</view>
				</view>
				<view class="arrow_right" style="width:100upx">
					<image class="mt-4" src="../../static/icon/arrow_right.png" style="width: 50upx;height: 50upx;"></image>
				</view>
			</view>
			
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
		
		<!-- 报名提示弹窗 -->
		<uni-popup ref="popup" background-color="#fff" before-close="true">
			<view class="popup-content" >
				<text>您尚未报名，请联系单位先报名考试</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chapterList: [],
				
				loadStatus: 'noMore',
			}
		},
		
		onPullDownRefresh() {
			this.getShuatiChapter()
			setTimeout(() => {
				uni.showToast({
					title: "刷新成功",
					icon: 'none'
				})
				//this.list = ['New Item1', 'New Item2', ...];
			    uni.stopPullDownRefresh(); // 数据更新完成后停止下拉刷新
			}, 2000);
		},
		
		onLoad() {
			let apply = uni.getStorageSync("staff_apply")
			if(apply){
				this.getShuatiChapter()
			}
		},
		onShow() {
			setTimeout(()=>{
				let apply = uni.getStorageSync("staff_apply")
				if(!apply){
					this.$refs.popup.open('center')
					return 
				}
			}, 500)
		},
		methods: {
			getShuatiChapter(){
				let url = '/shuati/getShuatiChapter'
				let apply = uni.getStorageSync("staff_apply")
				this.$H.post(url, {examType: apply.examType}, {token: true}).then(res=>{
					uni.showLoading({
						title: "请求中..."
					})
					if(!res || res.code != 200){
						return uni.showToast({
							title: '获取数据失败',
							icon:'none'
						})
					}
					uni.hideLoading()
					this.chapterList = res.result
					
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
					uni.hideLoading()
				})
			},
			
			// 进入刷题
			gotoShuati(chapterId){
				uni.showLoading({
					title: "请求中..."
				})
				let url = '/shuati/startShuati'
				let param = {chapterId: chapterId, shuatiType: '1'}
				this.$H.post(url, param, {token: true}).then(res=>{
					if(!res || res.code != 200){
						return uni.showToast({
							title: '操作失败'
						})
					}
					uni.hideLoading()
					// 跳转刷题页面
					uni.navigateTo({
						url: "/pages/shuati/shuati?chapterId=" + chapterId
					})
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
					uni.hideLoading()
				})
				
			}
		}
	}
</script>

<style>
	
	page{
		height: 100%;
		background: #f1f1f1;
		
	}
	
	.content{
		width: 100vw !important;
		height: 100vh !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}
	
	.chapter_con{
		background-color: #ffffff;line-height: 60upx;border-radius: 10upx;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);
		font-size: 24upx;
	}
	
	.arrow_right{
		width: 50upx;line-height: 120upx;
	}
	
	.chapter_title{
		width: 570upx;font-weight: bold;font-size: 30upx;color: #425ca1;
	}
	
	.chapter_icon{
		width: 50upx;line-height: 60upx;padding-top: 7upx;
	}
	
	.total_num{
		font-size: 30upx;color: #425ca1;font-weight: bold;
	}
	
	.right_rate{
		font-size: 30upx;color: #2b8426;font-weight: bold;
	}
</style>
